<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>定时器的制作</title>
    <style>
        .input{ 
            border:1px solid;
            width:100px;
            height:100px;
            margin:100px auto;
        }
        .input2{ 
            /*border:1px solid;   */
            width:500px;
            height:500px;
            margin:-91px auto;
        }
    </style>
</head>
<body>
    <h1>定时器的制作</h1>
    <hr>
    <button onclick="time()" id="star">计时开始</button>
    <div class="input" id="box">
        
    </div>
    <!-- <img src="./1.jpg" height="300" id="img"  onclick="turmax()"> -->
    <div class="input2">
        <img src="./2.jpg" height="500" id="img"  onclick="tur()">
    </div>


    <script>
            var num = 0;
        function time(){
            var mods = document.getElementById('box');
            var star = document.getElementById('star')
            var box = document.getElementById('img');
            var ML = mods.innerHTML;
            num += 1;
            console.log(num);
            console.log(box.src);
            
            i = 0;
            var arr = new Array;

                function clear(){

                    // arr.push(i);
                    // console.log(arr);
                    i++;
                    console.log(i);
                    // 以下为石头剪刀布
                    if (i%3 == 1) {
                        box.src = "http://localhost/std/s87/JS704/2.jpg";
                        
                    }
                    if (i%3 == 0) {
                        box.src = 'http://localhost/std/s87/JS704/3.jpg';
                        
                    }
                    if (i%3 == 2) {
                        box.src = 'http://localhost/std/s87/JS704/4.jpg';
                        
                    }

                    mods.innerHTML = i;
            }

                    // 判断何时应该进行停止开始操作

            if(num%3 == 1){
                t1 = setInterval(clear,10);
                star.innerHTML = '计时停止';
            }

            if(num%3 == 0){
                mods.innerHTML = 0;

                star.innerHTML = '计时开始';

            }

            if (num%3 == 2) {
                clearInterval(t1);

                star.innerHTML = '计时重置';
            }

        }
    </script>

</body>
</html>